<template>
    <div class="goodsDetails">
      <div class="openUser" @click="open">
        打开用户拍卖信息
      </div>
      <div class="mask" v-show="mask" @click="login">
      </div>
      <div class="aaa" v-show="Mask">
        <img @click="login" src="../assets/image/icon_close.png" alt="">
        <input class="userid" autofocus type="text" v-model="price" value="price" placeholder="金額を入力してください。"/>
        <div class="logins" @click="payproduct">確定</div>
      </div>
      <van-swipe :autoplay="3000">
        <van-swipe-item class="swiper"  @click="change(index)" v-for="(image, index) in shop.productPics" :key="index">
          <img v-lazy="image.picUrl" />
        </van-swipe-item>
      </van-swipe>

      <div class="message">
        <div class="left">
          <p class="style">{{shop.brandName}}</p>
          <p class="shops">{{shop.productName}}</p>
        </div>
        <div class="right">
          <span>ランク</span>
          <span>{{shop.valueStandard}}</span>
        </div>
        <p class="last">注:腕时计商品の竞売価格には、関税が含まれています</p>
      </div>
      <div class="pay">
        <div class="btns" v-if="ls.id==0">
          <i>最高値
          </i>
          <i>¥{{shop.highestPrice?shop.highestPrice:"--"}}</i>
          <i></i>
          <i>成約</i>
        </div>
        <div class="btn2" v-if="ls.id==1">
            <div class="left">
              <i class="mi" w-if="shop.commissionPrice!=null">スタート</i>
              {{shop.commissionPrice}}
            </div>
          <div :class="{right:state==1,light:state==2}" @click="pay">
            <div class="num1">
              <i class="mi">自社入札</i>
              <i class="price" w-if="shop.myBidPrice!=null">¥{{shop.myBidPrice!=null?shop.myBidPrice:"--"}}</i>
            </div>
            <div class="line"></div>
            <div class="rig">{{title}}</div>
          </div>
        </div>
      </div>
      <div class="details">
        <h3>商品の詳細</h3>
        <p><span>受付番号</span><span v-if="shop.id!=null">{{shop.id}}</span></p>
        <p><span>ブランド</span><span v-if="shop.brandName!=null">{{shop.brandName}}</span></p>
        <p><span>商品名</span><span v-if="shop.productName">{{shop.productName}}</span></p>
        <p><span>ランク</span><span v-if="shop.valueStandard!=null">{{shop.valueStandard}}</span></p>
        <p><span>タイプ</span><span w-if="shop.material!=null">{{shop.material}}</span></p>
        <p><span>付属品</span><span>{{fushupin}}</span></p>
      </div>
      <div class="showImages">
        <img :src="n.picUrl" alt="" v-for="n in shop.productPics">
      </div>
      <div class="showUser" v-show="mess">
        <div style="height: .64rem;display: flex;width: 90%;margin:.22rem .16rem;border-bottom: 1px solid #E5E5E5;text-align: center">
          <div style="height:.64rem;margin-left: .16rem;">会員ID</div>
          <div style="height:.64rem;margin-left: .35rem;">入札価格</div>
          <!---->
          <div style="height:.64rem;margin-left: .49rem;">入札時間</div>

        </div>
        <div class="content">
          <img class="cha" @click="closeShow" src="https://resource.growthupup.com/cha.png" alt="">
          <div :class="userself.bea?'userselfb':'userselfa'" v-show="userself!=''" >
            <div class="s id" style="margin-left: .16rem;">自社</div>
            <div class="s price" style="margin-left: .16rem;">¥{{userself.price}}</div>
            <div class="s time" style="margin-left: .16rem;">{{userself.createTime}}</div>
          </div>
          <div class="alt" v-show="!paimai">
            自社入札中
          </div>
          <div :class="n.bol?'savew':'conte'" v-show="paimai"  v-for="n in messages">
            <div class="s id" style="margin-left: .16rem;">{{n.userId}}</div>
            <div class="s price" style="margin-left: .16rem;">¥{{n.price}}</div>
            <div class="s time" style="margin-left: .16rem;">{{n.createTime}}</div>
          </div>

        </div>


      </div>
      <div class="block" @click="closeShow" v-show="mess"></div>
    </div>
</template>

<script>
  import Vue from "vue"
  import { Toast } from 'vant';
  import { ImagePreview } from 'vant';
  import { Swipe, SwipeItem } from 'vant';

  Vue.use(Swipe).use(SwipeItem);

  Vue.use(Toast);
  import axios from "axios"
    export default {
        name: "GoodsDetails",
      data(){
          return {
            userself:"",
            mess:false,
            messages:[
              {
                id:"22",
                price:'1111',
                time:"10"
              }
            ],
            th:[
              "",
              "",
              ""
            ],
            show:false,
            moneyType:"YEN",
            price:"",
            mask:false,
            Mask:false,
            productId:"",
            state:2,
            ls:{
              id:1
            },
            imgs:[

            ],
            shop:{

            },
            alt:"",
            userId:"",
            title:"入札",
            url:"",
            id:"",
            auctionProductUser:"",
            fushupin:"",
            pageSize:10,
            pageNum:1,
            paimai:true
          }
      },

      methods:{
        add0(m){return m<10?'0'+m:m },
        format(shijianchuo){
//shijianchuo是整数，否则要parseInt转换
    var time = new Date(shijianchuo);
    // var y = time.getFullYear();
    var m = time.getMonth()+1;
    var d = time.getDate();
    var h = time.getHours();
    var mm = time.getMinutes();
    var s = time.getSeconds();
    return this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm)+':'+this.add0(s);
  },
        open(){
          if(this.paimai==true){
              this.after()
            console.log(this.paimai)
          }else{
            this.ing()
            console.log(this.paimai)
          }
          this.mess = true

        },
        //拍卖中
        ing(){
          axios.get("http://auction.growthupup.com/wap/auction/auctRecord?productId="+this.productId+"&pageSize="+this.pageSize+"&pageNum="+this.pageNum).then(res=>{

            if(res.data.success){
              var res = res.data.data.data
              console.log(res)
              for(let i=0;i<res.length;i++){
                res[i].createTime =  this.format(res[i].createTime)
                if(res[i].userId==this.userId){
                  this.userself=res[i]
                  this.userself.bea=false
                  return
                }
              }
            }
          })
        },
        //拍卖后
        after(){
          axios.get("http://auction.growthupup.com/wap/auction/auctRecord?productId="+this.productId+"&userId="+this.userId+"&pageSize="+this.pageSize+"&pageNum="+this.pageNum).then(res=>{

            if(res.data.success){
              this.messages = res.data.data.data
              console.log(this.messages[0].userId)
              console.log(this.userId)
              for(let i=0;i<this.messages.length;i++){
                this.messages[i].createTime =  this.format(this.messages[i].createTime)
                this.messages[i].bol= false
                if(this.messages[0].userId != this.userId){
                  this.messages[0].bol=true
                }
                console.log(this.messages)
                if(this.messages[i].userId==this.userId){
                  this.userself=this.messages[i]
                  if(i==0){
                    this.userself.bea=true
                  }
                  return
                }
              }



            }
          })
        },
          //
        closeShow(){
          this.mess=false
        },
          //图片预览

          change(i){
            ImagePreview({
              images: [this.shop.productPics[i].picUrl],
              startPosition: i,
              onClose() {
                // do something
              }
            });
          },
          //发送参拍价格
        payproduct(){
          this.login();
          if(this.shop.isBidSold==1){

            this.ls.id = 0
          }else if(this.shop.isKeep==1){

          }else if(this.shop.isUnsold==1){
            this.ls.id=1;
            this.state=1
            this.title="流れ"
          }
          if(this.price==""){
            this.login()
            this.$toast('正しい金額を入力してください。');
            this.price=""
            return
          }
          if(this.price<this.shop.commissionPrice){
            this.login()
            this.$toast('スタート値より高い金額を入力してください。');
            return
          }
          if(this.shop.myBidPrice>this.price){
            this.login()
            this.$toast('前回入札金額より高い金額を入力してください。');
            return
          }
          axios.get("http://auction.growthupup.com/wap/auction/auct?productId="+this.productId+"" + "&price="+
            this.price+"&moneyType="+this.moneyType+"&userId="+this.userId).then(res=>{
              if(res.data.success){
                this.price=""
                  console.log(res)
                this.shop.myBidPrice = res.data.data.price
                this.id = res.data.data.id
                this.title = "再入札"
                this.login()
              }else{
                this.$toast('入札エラー');
                this.price=""
                this.$router.push('/login')
              }
          })
        },
        login(){
          this.mask = false;
          this.Mask = false;
        },
        pay(){
          if(this.state==1){
            return
          }
          this.mask = true;
          this.Mask = true;
        },
        getuserid(){
          console.log(this.$route.query)
          if(this.$route.query.userId){
            this.userId = this.$route.query.userId
          }
          if(this.$route.query.productId){
            this.productId = this.$route.query.productId
          }
        },
        getId(){
          console.log(this.userid)
          console.log(this.productId)
          axios.get('http://auction.growthupup.com/wap/product/detail?productId='+this.productId)
            .then(res=>{
              if(res.data.success){
                this.shop=res.data.data

                if(this.shop.isBidSold==1){
                  this.paimai=true
                  this.ls.id = 0
                }else if(this.shop.isKeep==1){
                  this.paimai=true
                }else if(this.shop.isUnsold==1){
                  this.ls.id=1;
                  this.state=1
                  this.title="流れ"
                  this.paimai=true
                }else{
                  this.paimai=false
                }
                this.shop.productPackages.forEach(r=>{
                  this.fushupin += " "+r.packageName
                })
                this.businessId =res.data.data.businessId
                this.url = this.shop.productPics!=[]?this.shop.productPics[0].picUrl:""

                if(this.shop.isUnsold==1){
                  this.state=1
                  this.title="流れ"
                }

                this.auctionProductUser = res.data.data.highestPrice
              }else{

                // this.$router.push('/login')

              }
            })
        },
      },
      created() {
          if(this.id!=""){
            this.title = "再入札"
          }
          this.getuserid();
          this.getId()
      }
    }
</script>

<style lang="scss">
  .swiper img{
    width: 100%;
    height: 100%;
  }
  .openUser{
    width: 100%;
    height: .5rem;
    line-height: .5rem;
    background: black;
    text-align: center;
    color: #FFFFFF;
  }
  .block{
    z-index: 10;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
    border:1px solid rgba(151,151,151,1);
  }
  .showUser{
    z-index: 11;
    width: 3.43rem;
    height: 5.51rem;
    position: fixed;
    left: .16rem;
    top: .2rem;
    background: #FFFFFF;
    border-radius:.08rem;
    border:1px solid rgba(151,151,151,1);
    .content{
      width:90%;
      display: flex;
      height: 3.29rem;
      overflow-y: auto;
      margin:.16rem;
      text-align: center;
      flex-direction: column;
      padding-bottom: .64rem;
      overflow-x: hidden;
      .alt{
        margin-top: 1rem;
        font-size: .18rem;
        color:gray;
        opacity: .5;
      }
      .cha{
        width: .16rem;
        height: .16rem;
        position: absolute;
        right: .16rem;
        top: .26rem;
        z-index: 11;

      }
      .conte{
        width: 100%;
        display: flex;
        height:.64rem;
        .s{
          text-align: center;
          height: .5rem;
          line-height: .5rem;
        }
        .id{
          width: .48rem;
        }
        .price{
          width: .94rem;
        }
        .time{
          width: 1.2rem;
        }


      }
      .userselfa{
        width: 100%;
        display: flex;
        height:.64rem;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:#333333;
        .s{
          text-align: center;
          height: .5rem;
          line-height: .5rem;
        }
        .id{
          width: .48rem;
        }
        .price{
          width: .94rem;
        }
        .time{
          width: 1.2rem;
        }

      }
      .userselfb{
        background:rgba(229,32,32,0.1);
        width: 100%;
        display: flex;
        height:.64rem;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:#E52020;
        .s{
          text-align: center;
          height: .5rem;
          line-height: .5rem;
        }
        .id{
          width: .48rem;
        }
        .price{
          width: .94rem;
        }
        .time{
          width: 1.2rem;
        }
      }
      .savew{
        width: 100%;
        display:flex;
        height:.64rem;
        background:rgba(229,32,32,0.1);
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:#E52020;
        line-height: .64rem;
        .s{
          text-align: center;
          height: .5rem;

        }
        .id{
          width: .48rem;
        }
        .price{
          width: .94rem;
        }
        .time{
          width: 1.2rem;
        }
      }


    }



  }

  .aaa{
    width: 2.8rem;
    height: 2.1rem;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background:#fff;
    z-index: 99999;
    img{
      width: .16rem;
      height: .16rem;
      position: absolute;
      right: .19rem;
      top: .16rem;
    }
  }
  .userid {
    border: none;
    outline: none;
    border-bottom: 2px solid #E5E5E5;
    background: #fff;
    width: 80%;
    display: block;
    margin: 0 auto;
    margin-top: .6rem;
    margin-bottom: .3rem;
  }
  .logins{
    width:1.23rem;
    height: .51rem;
    background: #FF595E;
    text-align: center;
    line-height: .53rem;
    margin: 0 auto;
    color: white;
  }
  .mask{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: fixed;
    z-index: 1000;


  }
.goodsDetails {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  .van-swipe__track{
    height: 3rem;
  }

  .message{
    margin-top: .16rem;
    display: flex;
    padding:0 .18rem 0 .16rem;
    box-sizing: border-box;
    justify-content: space-between;
    width: 100%;
    position: relative;
    .left{
      display: flex;
      flex-direction: column;
      font-size: .24rem;
      .style{
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:.34rem;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 2.3rem;
      }
      .shops{
        font-family:PingFangSC-Light;
        font-weight:300;
        color:rgba(51,51,51,1);
        line-height:.34rem;
      }
    }
   .right{
      width: .98rem;
       height: .98rem;
      display: flex;
      flex-direction: column;
      text-align: center;
      span:nth-child(1){
        font-size:.1rem;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:.14rem;
      }
      span:nth-child(2){
        font-size:.45rem;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:.63rem;
      }
    }
    .last{
      position: absolute;
      left: 0;
      bottom: -.14rem;
      font-size:.1rem;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(204,204,204,1);
      line-height:.14rem;
      margin-left: .16rem;
    }
  }
  .pay{
    height:.86rem;
    margin-top: .34rem;
    .btns{
      width: 91%;
      height:.7rem;
      background:rgba(229,32,32,1);
      position: relative;
      display: flex;
      margin:auto;
      box-sizing: border-box;
      i:nth-child(1){
        font-size:.1rem;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:.7rem;
        margin-left: 23%;
      }
      i:nth-child(2){
        font-size:.2rem;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:.7rem;
        text-indent: .04rem;
      }
      i:nth-child(3){
        width: 1px;
        height: .46rem;
        background:rgba(255,255,255,1);
        margin:auto 3% auto 22%;
      }
      i:nth-child(4){
        font-size:.2rem;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(255,255,255,0.5);
        line-height:.7rem;

      }
    }
    .btn2{
      width: 100%;
      height: .7rem;
      padding:auto .17rem auto .16rem;
      box-sizing: border-box;
      display: flex;
      .left{
        width: 1.66rem;
        height: 100%;
        position: relative;
        text-align: center;
        line-height: .9rem;
        background: #509E2D;
        font-size:.2rem;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
        margin-left: .16rem;
        .mi{
          position: absolute;
          left: .12rem;
          top: .15rem;
          font-size:.1rem;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(255,255,255,1);
          line-height:.14rem;
        }
      }
      .right{
        width: 1.66rem;
        height: 100%;
        background:rgba(136,136,136,1);
        margin-left: .12rem;
        display: flex;
        .num1{
          display: flex;
          flex-direction: column;
          position: relative;
          .mi{
            left: .12rem;
            top: .15rem;
            position: absolute;
            font-size:.1rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:.14rem;
            width: .7rem;
          }
          .price{
            font-size:.2rem;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            line-height: .9rem;
            margin-left: .1rem;
          }
        }
        .line{
          width:1px;
          height:.46rem;
          background:rgba(255,255,255,1);
          margin:auto;
        }
        .rig{
          font-size:.2rem;
          font-family:PingFangSC-Medium;
          font-weight:500;
          color:rgba(255,255,255,1);
          line-height:.7rem;
          margin-right: .12rem;
        }
      }
      .light{
        width: 1.66rem;
        height: 100%;
        background:#FF595E;
        margin-left: .12rem;
        display: flex;
        .num1{
          display: flex;
          flex-direction: column;
          width: .74rem;
          position: relative;
          .mi{
            left: .12rem;
            top: .15rem;
            position: absolute;
            font-size:.1rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:.14rem;
          }
          .price{
            font-size:.2rem;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            line-height: .9rem;
            margin-left: .1rem;
            /*width: .74rem;*/
          }
        }
        .line{
          width:1px;
          height:.46rem;
          background:rgba(255,255,255,1);
          margin:auto;
        }
        .rig{
          font-size:.2rem;
          font-family:PingFangSC-Medium;
          font-weight:500;
          color:rgba(255,255,255,1);
          line-height:.7rem;
          margin-right: .12rem;
        }
      }
    }

  }
  .details{
    padding:.32rem 0 .4rem .16rem;
    box-sizing: border-box;
    h3{
      font-size:.16rem;
      font-family:PingFangSC-Medium;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:.23rem;
      margin-bottom:.12rem;
    }
    p{
      display: flex;
     span:nth-child(1){
       width: .64rem;
       font-size:.16rem;
       font-family:PingFangSC-Regular;
       font-weight:400;
       color:rgba(155,155,155,1);
       line-height:.23rem;
       margin-right: .36rem;
       margin-bottom:.06rem;
     }
      span:nth-child(2){
        font-size:.16rem;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:.23rem;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 2rem;
      }
    }

  }
}
</style>
